<template>
	<view class="brand-item-box">
		<view class="brand-item" v-for="(data,index) in list" :key="index" @click="goBrandInfo(data.factory_id,data.style_id,data.style_name)">
			<view class="brand_image" v-if="data.backgroud_img">
				<image :src="data.backgroud_img" mode="aspectFill"></image>
			</view>
			<view class="brand-item-info" >
				<view class="brand-info-box-text-left">
					<image :src="data.category_img" mode="aspectFill"></image>
				</view>
				<view class="brand-info-box-text-right">
					<view class="brand-info-box-tit">{{data.factory_name}} <text>{{data.style}}</text></view>
					<view class="brand-info-box-hot">
						<text>人气：{{data.click?data.click:0}}</text> 
						<text>最近上新 12 款</text>
					</view>
				</view>
			</view>
			<!-- <view class="brand-tags">
				<view class="brand-tags-item" @click.stop="goFactoryImages(data.factory_id)">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/brandInfo/icon1.png"></image>
					<text>面料</text>
				</view>
				<view class="brand-tags-item" @click.stop="goFactoryShowroom(data.factory_id)">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/brandInfo/icon2.png"></image>
					<text>展厅</text>
				</view>
				<view class="brand-tags-item" @click.stop="goFactoryVideo(data.factory_id)">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/brandInfo/icon3.png"></image>
					<text>视频</text>
				</view>
			</view> -->
			<view class="reason">
				<view class="reason-label">推荐理由：</view>
				<view class="reason-value">{{data.reason}}</view>
			</view>
			<scroll-view class="brand-item-scroll-view" v-if="data.goods_list.length" scroll-x style="padding-top: 0;">
				<view class="brand-item-pro-item" v-for="(item,i) in data.goods_list" :key="i"  @click.stop="goProInfo(item.goods_id)">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="brand-item-pro-item-name">{{item.goods_name}}</view>
					<view class="brand-item-pro-item-price">￥<text>{{item.retail_price}}</text></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			goBrandInfo(factory_id,style_id,style_name){
				if(style_id){
					uni.navigateTo({
						animationDuration: 500,
						url: '/brand-list/brand-info/brand-info?type=2&factory_id='+factory_id+'&style_id='+style_id+'&style_name='+style_name
					})
				}else{
					uni.navigateTo({
						animationDuration: 500,
						url: '/brand-list/brand-info/brand-info?type=1&factory_id='+factory_id
					})
				}
			},
			goFactoryImages(factory_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-images?factory_id='+factory_id
				})
			},
			goFactoryShowroom(factory_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-showroom?factory_id='+factory_id
				})
			},
			goFactoryVideo(factory_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-videos?factory_id='+factory_id
				})
			},
		}
	}
</script>

<style lang="scss">
	.brand-item{
		margin-top: 60rpx;
		box-shadow: 0px 6rpx 30rpx 0px rgba(40,34,31,0.06);
		border-radius: 16rpx;
		background-color: #FFF;
		padding-bottom: 1rpx;
		.brand-item-info{
			display: flex;
			align-items: center;
			padding: 0 30rpx 30rpx;
			margin-top: -70rpx;
			position: relative;
			z-index: 1;
			.brand-info-box-text-left{
				image{
					border: solid 2rpx #EEE;
					border-radius: 8rpx;
					width: 120rpx;
					height: 120rpx;
				}
			}
			.brand-info-box-text-right{
				flex: 1;
				min-width: 0;
				margin-left: 20rpx;
				.brand-info-box-tit{
					font-size: 36rpx;
					color: #FFF;
					margin-bottom: 30rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					text{
						font-size: 24rpx;
						margin-left: 20rpx;
						color: #7E5A21;
						background-color: #FCF6EC;
						border: solid 2rpx #F2F2F2;
						line-height: 36rpx;
						border-radius: 4rpx;
						font-weight: normal;
						padding: 0 10rpx;
					}
				}
				.brand-info-box-hot{
					color: #909090;
					font-size: 24rpx;
					text{
						margin-right: 30rpx;
					}
				}
			}
		}
		.reason{
			margin: 0 30rpx 30rpx;
			background-color: #FCF6EC;
			border-radius: 4rpx;
			font-size: 24rpx;
			color: #7E5A21;
			display: flex;
			align-items: flex-start;
			line-height: 50rpx;
			padding: 10rpx 20rpx;
			.reason-label{
				font-weight: bold;
			}
			.reason-value{
				flex: 1;
				min-width: 0;
			}
		}
		.brand-info-box-des{
			margin: 30rpx;
			position: relative;
		}
		.brand-tags{
			display: flex;
			margin-bottom: 40rpx;
			padding: 0 30rpx;
			.brand-tags-item{
				flex: 1;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				font-size: 24rpx;
				color: #4D4D4D;
				border-radius: 4rpx;
				background-color: #F2F2F2;
				&:nth-child(2){
					margin: 0 28rpx;
				}
				image{
					vertical-align: middle;
					width: 30rpx;
					height: 30rpx;
					margin: -10rpx 10rpx 0 0;
				}
			}
		}
		.brand_image{
			position: relative;
			overflow: hidden;
			&::after{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
				left: 0;
				top: 0;
				background-image: linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(0,0,0,.8));
			}
			image{
				width: 100%;
				height: 200rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
		}
		.brand-item-scroll-view{
			white-space: nowrap;
			padding: 30rpx;
			box-sizing: border-box;
			.brand-item-pro-item{
				display: inline-block;
				width: calc((100% - 40rpx) / 3);
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0;
				}
				.brand-item-pro-item-name{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 25rpx 0;
					font-size: 24rpx;
				}
				.brand-item-pro-item-price{
					font-size: 20rpx;
					color: #F59359;
					font-family: 'din';
					text{
						font-size: 28rpx;
					}
				}
				image{
					width: 196rpx;
					height: 196rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>
